<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-edit"></i> 配置管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>地区管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="danger"
                   icon="el-icon-delete"
                   class="handle-del mr10"
                   @click="delAllSelection">批量删除</el-button>
      </div>
      <el-tree :data="list"
               ref="tree"
               :default-expanded-keys="[]"
               node-key="id"
               check-change="checkChange"
               show-checkbox
               :props="{
          children: 'son',
          label: 'name'
        }">
      </el-tree>
    </div>

  </div>
</template>

<script>

export default {
  name: 'areas',
  data () {
    return {
      list: [],
      getList () {
        let that = this;
        that.api.getAreasAll(function (list) {
          that.list = list;
        });
      },
      //删除请求
      delLists: function (ids, msg) {
        let that = this;
        if (ids.length < 1) {
          this.$message.error('请选择删除的数据');
          return false;
        }
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          that.api.delApi(ids, function (response) {
            that.query.page = 1;
            that.getList();
            that.multipleSelection = [];
            that.$message.success(msg);
          });
        }).catch(() => { });
      }
    };
  },
  created () {
    let that = this;
    this.getList();

  },
  methods: {

    loadNode (node, resolve) {
      console.log(node)
      if (node.level_type != '3') {
        return resolve(node.son);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [{
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }];

        resolve(data);
      }, 500);
    },
    delAllSelection () {
      let ids = this.$refs.tree.getCheckedKeys();
      let that = this;
      if (!ids || ids.length < 1) {
        this.$message.error('没有需要删除的地区');
        return false;
      }
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        that.api.delAreas(ids, function (response) {
          that.getList();
          that.$message.success('删除成功');
        });
      }).catch(() => { });
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
